<template>
  <div class="app-container">
    <div class="head_search u-f u-f-ac u-fw">
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("名称") }}：</p>
        <el-input v-model="name" :placeholder="$t('请输入')"></el-input>
      </div>
      <div class="ipt_box u-f u-f-ac u-f-jsb">
        <p class="label font14 text_black">{{ $t("设备号") }}：</p>
        <el-input v-model="device_id" :placeholder="$t('请输入')"></el-input>
      </div>
      <div class="div_box u-f u-f-ac">
        <p class="label font14 text_black">{{ $t("所属代理商") }}：</p>
        <div
          class="content font14 text_black u-f u-f-ac"
          @click="openAgentList"
        >
          <p class="text-ellipsis">{{ agent ? agent : $t("选择代理商") }}</p>
        </div>
        <button class="btn font14 text_white bg_danger" @click="clearAgent">
          {{ $t("清除") }}
        </button>
      </div>
      <button class="sub_btn font14 text_white bg_blue" @click="getData('search')">{{ $t("提交") }}</button>
    </div>

    <div class="head_options u-f u-f-ac u-fw">
      <button
        class="sub_btn font14 text_white bg_blue"
        @click="addMaterial"
        v-if="permissions.indexOf('/screenadv/addPlan') != -1"
      >{{$t('添加广告投放计划')}}</button>
    </div>

    <div>
      <el-table :data="tableData">
        <el-table-column prop="plan_name" :label="$t('名称')"></el-table-column>
        <el-table-column prop="start_date" :label="$t('投放周期')">
          <template slot-scope="{row}">
            <span>{{row.start_date}} {{row.end_date}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="uploader" :label="$t('上传者')"></el-table-column>
        <el-table-column prop="remark" :label="$t('备注')"></el-table-column>
        <el-table-column prop="created" :label="$t('创建时间')"></el-table-column>
        <el-table-column :label="$t('操作')" width="250">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="lookDevice(scope.row)"
            >{{$t('查看机柜')}}</el-button>
            <el-button
              v-if="permissions.indexOf('/screenadv/editPlan') != -1"
              type="primary"
              size="mini"
              @click="updateMaterial(scope.row)"
            >{{$t('修改')}}</el-button>
            <el-button
              v-if="permissions.indexOf('/screenadv/deletePlan') != -1"
              type="danger"
              size="mini"
              @click="deletes(scope.row)"
            >{{$t('删除')}}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination_box">
        <el-pagination
          background
          
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="page_size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 添加和修改广告投放计划 -->
    <el-dialog
      width="1000px"
      :title="isUpdate ? $t('修改广告投放计划') : $t('添加广告投放计划')"
      :visible.sync="showUpdate"
      :close-on-click-modal="false"
    >
      <div class="order_detail">
        <div class="radio_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{$t('机柜型号')}}：</span>
          </p>
          <el-radio-group v-model="addFrom.model" :disabled="isUpdate" @change="changeModel">
            <el-radio label="vertical">{{$t('大机柜')}}</el-radio>
            <el-radio label="cross">{{$t('八口非触屏')}}</el-radio>
            <el-radio label="cross_touch">{{$t('八口触屏')}}</el-radio>
          </el-radio-group>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{$t('名称')}}：</span>
          </p>
          <el-input v-model="addFrom.name" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="date_box u-f u-f-ac">
          <p class="lable font14 text_black">{{$t('有效日期')}}：</p>
          <el-date-picker
            v-model="addFrom.dates"
            type="daterange"
            :range-separator="$t('至')"
            :start-placeholder="$t('开始日期')"
            :end-placeholder="$t('结束日期')"
            value-format="yyyy-MM-dd"
            @change="dateChange"
          ></el-date-picker>
        </div>
        <div class="textarea_list u-f">
          <p class="lable font14 text_black">{{$t('备注')}}：</p>
          <el-input type="textarea" autosize v-model="addFrom.remarks" :placeholder="$t('请输入内容')"></el-input>
        </div>
        <div class="ipt_list u-f u-f-ac" v-show="addFrom.model == 'vertical'">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{$t('屏幕设置')}}：</span>
          </p>
          <el-button
            type="primary"
            @click="openScreenDia"
            v-if="permissions.indexOf('/screenadv/addSize') != -1"
          >{{$t('屏幕设置')}}</el-button>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{$t('投放安排')}}：</span>
          </p>
          <el-button type="primary" @click="addPlanData">{{$t('添加广告投放计划')}}</el-button>
        </div>

        <div class="table_box">
          <el-table :data="planData">
            <el-table-column prop="start_hour" :label="$t('开始时间')" width="200">
              <template slot-scope="{ row }">
                <div class="plan_select">
                  <el-select v-model="row.start_hour">
                    <el-option v-for="item in hourArr" :key="item" :label="item" :value="item"></el-option>
                  </el-select>
                  {{$t('时')}}
                  <el-select v-model="row.start_minute">
                    <el-option v-for="item in minutedsArr" :key="item" :label="item" :value="item"></el-option>
                  </el-select>
                  {{$t('分')}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="end_hour" :label="$t('结束时间')" width="200">
              <template slot-scope="{ row }">
                <div class="plan_select">
                  <el-select v-model="row.end_hour">
                    <el-option v-for="item in hourArr" :key="item" :label="item" :value="item"></el-option>
                  </el-select>
                  {{$t('时')}}
                  <el-select v-model="row.end_minute">
                    <el-option v-for="item in minutedsArr" :key="item" :label="item" :value="item"></el-option>
                  </el-select>
                  {{$t('分')}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="plan_name" :label="$t('广告分组')">
              <template slot-scope="{ $index, row }">
                <div class="u-f u-f-ac">
                  <div class="div_box u-f u-f-ac">
                    <div class="content font14 text_black u-f u-f-ac">
                      <p class="text-ellipsis">{{ row.group_name }}</p>
                    </div>
                    <button
                      class="btn font14 text_white bg_blue"
                      @click="openPlanDialog($index)"
                    >{{$t('选择')}}</button>
                  </div>
                  <span
                    class="font14 text_black"
                    style="margin-right: 15px;"
                    v-if="row.size"
                  >{{$t('大小')}}：{{ row.size }}</span>
                  <span
                    class="font14 text_black"
                    v-if="row.duration"
                  >{{$t('时长')}}：{{ row.duration }}</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column :label="$t('操作')" width="90">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index)"
                >{{$t('删除')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="radio_list u-f u-f-ac">
          <p class="lable u-f u-f-ac">
            <span class="font14 text_black">{{$t('投放渠道')}}：</span>
          </p>
          <el-button
            type="primary"
            @click="openDeviceDia"
          >{{$t('选择机柜')}}</el-button>
        </div>
        <!-- 列表 -->
        <div class="device_box u-f u-fw">
          <li
              class="list font14 text_black u-f u-f-ac"
              v-for="(item, index) in changeDeviceArr"
              :key="index"
            >
              <i
                class="iconfont icon iconiconzhuanqu_shanchu font18 text_danger"
                @click="deleteDeviceArr(index)"
              ></i>
              {{item.cabinet_id}}({{item.device_num}}{{$t('口')}})
            </li>
        </div>

        <button
          class="update_btn font14 bg_blue text_white"
          v-if="!isUpdate"
          @click="addSubmit"
        >{{$t('提交')}}</button>
        <button
          class="update_btn font14 bg_blue text_white"
          v-if="isUpdate"
          @click="updateSubmit"
        >{{$t('提交')}}</button>
      </div>
    </el-dialog>

    <!-- 所属机柜列表 -->
    <el-dialog
      :title="$t('机柜列表')"
      :visible.sync="showDeviceList"
      :close-on-click-modal="false"
      width="1100px"
    >
      <el-table :data="deviceListTable">
          <el-table-column prop="seller" :label="$t('商户名称')">
            <template slot-scope="{ row }">
              <span>{{row.seller ? row.seller : ''}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="cabinet_id" :label="$t('设备号')"></el-table-column>
          <el-table-column prop="device_num" :label="$t('机柜口数')"></el-table-column>
        </el-table>

        <div class="pagination_box ">
          <el-pagination
            background
            
            @current-change="handleDeviceCurrentChange"
            :current-page="device_page"
            :page-size="device_page_size"
            layout="total, prev, pager, next, jumper"
            :total="device_total"
          >
          </el-pagination>
        </div>
    </el-dialog>

    <agent-list ref="agentList" @hide="closeAgentList"></agent-list>
    <adver-group ref="adverGroup" :type="adverGroupType" @hide="adverGroupConfirm"></adver-group>
    <change-agent ref="changeAgent" :defaultArr="changeAgentArr" @hide="agentConfirm"></change-agent>
    <change-device ref="changeDevice" :model="addFrom.model" @hide="deviceConfirm"></change-device>
    <screen-set ref="screenSet" :id="ad_position_id" @hide="screenConfirm"></screen-set>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>

<script>
import agentList from "components/agent-list/agent-list.vue";
import adverGroup from "components/adver/adver-group.vue";
import changeAgent from "components/adver/change-agent.vue";
import changeDevice from "components/adver/change-device.vue";
import screenSet from "components/adver/screen-set.vue";
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
  name: "screenadv-planList",
  data() {
    return {
      page: 1,
      page_size: 20,
      total: 0,
      device_page: 1,
      device_page_size: 20,
      device_total: 0,
      name: "",
      device_id: '',
      agent: '',
      aid: '',
      tableData: [],
      isUpdate: false,
      showUpdate: false,
      addFrom: {
        model: 'vertical',
        name: "",
        dates: "",
        remarks: "",
        channel: 2 // 1 按代理  2  按机柜
      },
      hourArr: [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23
      ],
      minutedsArr: [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        28,
        29,
        30,
        31,
        32,
        33,
        34,
        35,
        36,
        37,
        38,
        39,
        40,
        41,
        42,
        43,
        44,
        45,
        46,
        47,
        48,
        49,
        50,
        51,
        52,
        53,
        54,
        55,
        56,
        57,
        58,
        59
      ],
      ad_position_id: 0, //屏幕位置id
      planData: [],
      plan_id: "", //计划id
      adverGroupType: 0,
      changeAgentArr: [],
      changeDeviceArr: [],
      equipment_group: [], //机柜或者代理id集合
      showDeviceList: false,
      deviceListTable: []
    };
  },
  components: {
    adverGroup,
    screenSet,
    changeAgent,
    changeDevice,
    agentList,
  },
  computed: {
    ...mapState(["token", "ocode", "permissions"])
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleRefresh() {
      this.page = 1
      this.page_size = 20
      this.name = ''
      this.device_id = ''
      this.agent = "";
      this.aid = "";
      this.getData()
    },
    getData() {
      util
        .$http("/screenadv/planList?page=" + this.page, {
          page_size: this.page_size,
          name: this.name,
          device_id: this.device_id,
          agency_id: this.aid
        })
        .then(res => {
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
          }
        });
    },
    openAgentList() {
      this.$refs.agentList.show();
    },
    closeAgentList(data) {
      this.agent = data.name;
      this.aid = data.id;
    },
    clearAgent() {
      this.agent = "";
      this.aid = "";
    },
    addMaterial() {
      this.addFrom = {
        model: 'vertical',
        name: "",
        dates: "",
        remarks: "",
        channel: 2 // 1 按代理  2  按机柜
      };
      this.ad_position_id = 0;
      this.planData = [];
      this.plan_id = "";
      this.adverGroupType = 0;
      this.changeAgentArr = [];
      this.changeDeviceArr = [];
      this.equipment_group = [];
      this.isUpdate = false;
      this.showUpdate = true;
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.getData();
    },
    dateChange(val) {
      this.addFrom.dates = val;
    },
    handleDelete(index) {
      this.planData.splice(index, 1);
    },
    openPlanDialog(index) {
      this.adverGroupType = index;
      this.$refs.adverGroup.show();
    },
    addPlanData() {
      let obj = {
        start_hour: 0,
        start_minute: 0,
        end_hour: 23,
        end_minute: 59,
        group_id: "",
        group_name: "",
        size: "",
        duration: ""
      };
      this.planData.push(obj);
    },
    adverGroupConfirm(data, index) {
      let item = this.planData[index];
      item.group_id = data.id;
      item.group_name = data.name;
      item.size = data.size;
      item.duration = data.duration;
      this.$set(this.planData, index, item);
    },
    changeModel(val) {
      this.changeAgentArr = [];
      this.changeDeviceArr = [];
      this.equipment_group = [];
    },
    addSubmit() {
      util
        .$http("/screenadv/addPlan", {
          model: this.addFrom.model,
          plan_name: this.addFrom.name,
          start_date: this.addFrom.dates[0],
          end_date: this.addFrom.dates[1],
          remark: this.addFrom.remarks,
          channel: this.addFrom.channel,
          ad_position_id: this.ad_position_id,
          details: JSON.stringify(this.planData),
          equipment_group: this.equipment_group.join()
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.addFrom = {
              model: 'vertical',
              name: "",
              dates: "",
              remarks: "",
              channel: 2 // 1 按代理  2  按机柜
            };
            this.ad_position_id = 0;
            this.planData = [];
            this.plan_id = "";
            this.adverGroupType = 0;
            this.changeAgentArr = [];
            this.changeDeviceArr = [];
            this.equipment_group = [];
            this.getData();
            this.showUpdate = false;
          }
        });
    },
    updateSubmit() {
      util
        .$http("/screenadv/editPlan", {
          id: this.plan_id,
          model: this.addFrom.model,
          plan_name: this.addFrom.name,
          start_date: this.addFrom.dates[0],
          end_date: this.addFrom.dates[1],
          remark: this.addFrom.remarks,
          channel: this.addFrom.channel,
          ad_position_id: this.ad_position_id,
          details: JSON.stringify(this.planData),
          equipment_group: this.equipment_group.join()
        })
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.addFrom = {
              model: 'vertical',
              name: "",
              dates: "",
              remarks: "",
              channel: 2 // 1 按代理  2  按机柜
            };
            this.ad_position_id = 0;
            this.planData = [];
            this.plan_id = "";
            this.adverGroupType = 0;
            this.changeAgentArr = [];
            this.changeDeviceArr = [];
            this.equipment_group = [];
            this.getData();
            this.showUpdate = false;
          }
        });
    },
    lookDevice(row) {
      this.plan_id = row.id;
      this.showDeviceList = true
      util
        .$http("/screenadv/planDevice?page=" + this.device_page, {
          page_size: this.device_page_size,
          id: row.id
        })
        .then(res=>{
          if (res.code == 1) {
            this.device_total = res.data.total
            this.deviceListTable = res.data.list
          }
        })
    },
    handleDeviceCurrentChange(val) {
      this.device_page = Number(val);
      this.lookDevice({
        id: this.plan_id
      })
    },
    updateMaterial(row) {
      this.addFrom = {
        model: 'vertical',
        name: "",
        dates: "",
        remarks: "",
        channel: 2 // 1 按代理  2  按机柜
      };
      this.ad_position_id = 0;
      this.planData = [];
      this.adverGroupType = 0;
      this.changeAgentArr = [];
      this.changeDeviceArr = [];
      this.equipment_group = [];
      this.plan_id = row.id;
      this.isUpdate = true;
      this.showUpdate = true;
      setTimeout(() => {
        util
        .$http("/screenadv/plandetail", {
          id: row.id
        })
        .then(res => {
          if (res.code == 1) {
            this.addFrom = {
              model: res.data.model,
              name: res.data.plan_name,
              dates: [res.data.start_date, res.data.end_date],
              remarks: res.data.remark,
              channel: res.data.channel
            };
            this.ad_position_id = res.data.ad_position_id;
            this.planData = res.data.details;
            if (res.data.channel == 1) {
              for (let item of res.data.equipment_group) {
                this.changeAgentArr.push({
                  agency_id: item.data_id,
                  name: item.name,
                  num: item.num
                });
                this.equipment_group.push(item.data_id);
              }
            } else if (res.data.channel == 2) {
              for (let item of res.data.equipment_group) {
                this.changeDeviceArr.push({
                  cabinet_id: item.data_id,
                  device_num: item.num
                });
                this.equipment_group.push(item.data_id);
              }
            }
          }
        });
      }, 150);
    },
    deletes(row) {
      this.$confirm(this.$t("是否要删除当前投放计划"))
        .then(() => {
          util
            .$http("/screenadv/deletePlan", {
              id: row.id
            })
            .then(res => {
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.getData();
              }
            });
        })
        .catch(() => {});
    },
    openScreenDia() {
      this.$refs.screenSet.show();
    },
    screenConfirm(id) {
      this.ad_position_id = id;
    },
    openAgentDia() {
      this.$refs.changeAgent.show();
    },
    agentConfirm(data) {
      this.equipment_group = [];
      this.changeAgentArr = data;
      for (let item of data) {
        this.equipment_group.push(item.agency_id);
      }
    },
    deleteAgentArr(index) {
      this.changeAgentArr.splice(index, 1);
      this.equipment_group.splice(index, 1);
    },
    openDeviceDia() {
      this.$refs.changeDevice.show();
    },
    deviceConfirm(data) {
      let arr = JSON.stringify(this.changeDeviceArr)
      for (let item of data) {
        if( !arr.includes(JSON.stringify(item)) ){
          this.changeDeviceArr.push(item)
          this.equipment_group.push(item.cabinet_id)
        }
      }
      // this.equipment_group = [];
      // this.changeDeviceArr = data;
      // for (let item of data) {
      //   this.equipment_group.push(item.cabinet_id);
      // }
    },
    deleteDeviceArr(index) {
      this.changeDeviceArr.splice(index, 1);
      this.equipment_group.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.head_search {
  margin-bottom: 20px;
}
.head_search .ipt_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .ipt_box .el-input {
  width: 200px;
}
.head_search .select_box {
  width: 260px;
  margin-right: 20px;
}
.head_search .select_box .el-select {
  width: 200px;
}
.head_search .switch_box {
  width: 151px;
  margin-right: 20px;
}
.head_search .div_box {
  margin-right: 20px;
}
.head_search .div_box .content {
  width: 170px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.head_search .div_box .content:active {
  border-color: #409eff;
}
.head_search .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.head_search .sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
.head_options .sub_btn {
  height: 34px;
  border: 0;
  outline: 0;
  padding: 0 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}
.head_options .txt_list {
  font-weight: bold;
  margin-right: 25px;
}
.iconfont {
  font-size: 15px;
  margin-right: 5px;
}
.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.order_detail .txt_list {
  margin-bottom: 20px;
}
.order_detail .txt_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .ipt_list {
  margin-bottom: 20px;
}
.order_detail .ipt_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .ipt_list .el-input {
  width: 350px;
}
.order_detail .date_box {
  margin-bottom: 20px;
}
.order_detail .date_box .lable {
  width: 100px;
  margin: 0;
}

.order_detail .textarea_list {
  margin-bottom: 20px;
}
.order_detail .textarea_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .textarea_list .el-textarea {
  width: 350px;
}
.order_detail .radio_list {
  margin-bottom: 20px;
}
.order_detail .radio_list .lable {
  width: 100px;
  margin: 0;
}
.order_detail .update_btn {
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 25px;
  cursor: pointer;
  border-radius: 4px;
}
.table_box {
  margin-bottom: 20px;
}
.table_box .plan_select .el-select {
  width: 62px;
}
.table_box .div_box {
  width: 220px;
  margin-right: 20px;
}
.table_box .div_box .content {
  width: 150px;
  height: 40px;
  padding-left: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  transition: border 0.3s;
  box-sizing: border-box;
}
.table_box .div_box .content:active {
  border-color: #409eff;
}
.table_box .div_box .btn {
  width: 60px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
}
.table_box .el-date-editor.el-input,
.table_box .el-date-editor.el-input__inner {
  width: 120px;
}
.device_box {
  margin-left: 100px;
}
.device_box .list {
  width: 25%;
  list-style: none;
  margin-bottom: 5px;
}
.device_box .list .iconfont {
  cursor: pointer;
}
</style>
<style>
.order_detail .textarea_list .el-textarea__inner {
  min-height: 90px !important;
}
</style>
